<template>
  <AppPage :show-footer="false">


<n-card class="cursor-pointer" hover:card-shadow style="height: 100%" :title="'当前位置:'+data.path" size="small" :segmented="{
            content: true,
            footer: 'soft',
          }">
            <template #header-extra>
              <NButton  class="float-right" type="primary" @click="gofileback()" >
                <TheIcon icon="material-symbols:arrow-back" :size="18" class="mr-5" />返回上级目录
              </NButton>
            </template>

              <n-grid cols="2 400:4 600:6" :x-gap="10" :y-gap="10">
                <n-grid-item v-for="item in data.ret_data">
                  <n-card embedded class="item" @click="gofile(item)">
                  <TheIcon icon="material-symbols:folder" :size="60" color="#ff91b4" v-if="item.file_type===1"/>
                    <n-image v-if="item.file_type===2" :src="item.url" width="50" height="50" style="object-fit: cover;border-radius: 3px"/>
                    <TheIcon icon="material-symbols:file-copy-rounded" :size="60" color="#ff91b4" v-if="item.file_type===3"/>
                    <br>
                  {{item.name}}
                    <br>
                  <n-button-group v-if="item.file_type!==1" style="margin-top: 5px">
                      <NButton round secondary type="primary" size="tiny" @click="download_file(item)" >
                        <TheIcon icon="material-symbols:download" :size="18" class="mr-5" />下载
                      </NButton>
                    <n-popconfirm @positive-click="delete_file(item)" >
                      <template #trigger>
                        <NButton round secondary type="error" size="tiny"  >
                          <TheIcon icon="material-symbols:delete-outline" :size="18" class="mr-5" />删除
                        </NButton>
                      </template>
                      将从服务器删除该文件,无法恢复。
                    </n-popconfirm>

                  </n-button-group>
                  </n-card>
                </n-grid-item>
              </n-grid>


          </n-card>


  </AppPage>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue';
import TheIcon from '@/components/icon/TheIcon.vue'
import api from '@/api'
import {NButton} from "naive-ui";
import axios from "axios";
import {getToken} from "@/utils";
const base_path = import.meta.env.VITE_BASE
const data = reactive({
  ret_data:[],
  path:'/',
  token: getToken(),
});
onMounted(() => {
  getDate()
});
async function getDate() {
  let ret = await api.getFiles({path:data.path})
  data.ret_data = ret.data.list
  data.path = ret.data.path
}
async function gofile(item) {
  if(item.file_type===1){
    data.path = item.path
    await getDate()
  }

}
async function gofileback() {
  if(data.path==="app/upload/"){
    return;
  }
  let path = data.path
  // 查找最后第二个斜杠的位置
  let lastSlashIndex = path.lastIndexOf('/');
  let secondLastSlashIndex = path.lastIndexOf('/', lastSlashIndex - 1);

  // 截取去除倒数第二个斜杠之后的部分
  data.path = path.slice(0, secondLastSlashIndex + 1);
  await getDate()
}

async function download_file(item) {
    console.log('1')
    let headers = { token: data.token }
    let data_p = { path: item.url }
    const response = await axios.get(base_path+'api/system/downloads/download_file', {
              responseType: 'blob', // 重要：指定响应类型为 blob
              headers:headers,
              params:data_p
            });
            // 创建一个新的 URL 对象
            const url = window.URL.createObjectURL(new Blob([response.data]));
            // 创建一个新的链接元素
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', item.name); // 指定下载文件的名称
            // 模拟点击下载
            document.body.appendChild(link);
            link.click();
            // 清理 URL 对象
            window.URL.revokeObjectURL(url);

    $message?.success("已下载")
}

async function delete_file(item) {
   await api.deleteFiles({path:item.url})
   $message?.success("已删除")
   await getDate()
}
</script>
<style>
.item {
  height: 150px;
  display: flex;
  justify-content: center;
  text-align: center;
}
</style>
